<template>
<div class="app-container">
    <el-row :gutter="20">
        <el-col :span="8" :offset="1">
            <el-card shadow="nerver" class="card">
                <img :src="ImgUrl" class="image">
                <div>
                    <ul class="list-group list-group-striped;border:solid 1px #dadee6;" >
                        <li
                        style="display:inline-block;border:solid 1px #dadee6;padding:5px;"
                        v-for="imgs in imgUrl"
                        :key="imgs.url"
                        @click="changeImg(imgs.url)">
                            <img :src="imgs.url" style="height:55px;width:55px;">
                        </li>
                    </ul>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12" :offset="1">
            <div style="margin-left:30px">
                <ul class="list-group list-group-striped">
                <li class="line">
                <strong class="texts">商品名：</strong>
                <span>{{ goods.goodsName }}</span>
                </li>
                <li class="line">
                <strong class="texts">价格：</strong>
                <span style="color:red;">¥{{ (goods.goodsPrice/100*(goods.goodsDiscount/100)).toFixed(2) }}</span>
                  <span style="color:#929292;margin-left:10px;text-decoration:line-through;font-size:10px"
                  v-if="goods.goodsDiscount !== 100">¥{{ (goods.goodsPrice/100).toFixed(2) }}</span>
                </li>
                <li class="line">
                <strong class="texts">折扣：</strong>
                <span>{{ goods.goodsDiscount == '100' ? '无折扣' :goods.goodsDiscount/ '10' + '折'  }}</span>
                </li>
                <li class="line">
                <strong class="texts">分类：</strong>
                <span>{{ goods.goodsClassifyStr }}</span>
                </li>
                <li class="line">
                <strong class="texts">品牌：</strong>
                <span>{{ goods.goodsBrand }}</span>
                </li>
                <li class="line">
                <strong class="texts">库存：</strong>
                <span>{{ goods.goodsStock }}</span>
                </li>
                <li class="line">
                <strong class="texts">交易时间：</strong>
                <span>{{ goods.dealTime }}</span>
                </li>
                <li class="line">
                <strong class="texts">交易地点：</strong>
                <span>{{ goods.dealPlace }}</span>
                </li>
                <li class="line">
                <strong class="texts">参数说明：</strong>
                <span>{{ goods.goodsSku }}</span>
                </li>
                <li class="line">
                <strong class="texts">商品简介：</strong>
                <span>{{goods.goodsDescribe }}</span>
                </li>
                </ul>
                <el-button type="danger" @click="addCart(goods.goodsId)">加入购物车</el-button>
                <el-button type="success" style="margin-left:15px;width:110px" @click="goTo(goods.goodsId)">立即购买</el-button>
            </div>
        </el-col>
    </el-row>
</div>
</template>

<script>
import { getGoods } from '@/api/shop/goods'
import { addCart } from '@/api/shop/shoppingcart'

export default {
    name:'ShopDetail',
    data() {
        return {
            goods: {},
            imgUrl: [],
            //默认显示主图
            ImgUrl: [],
        }
    },
    created() {
        let goods_id=this.$route.query.goods_id;
        this.getGoods(goods_id);
    },
    methods: {
        getGoods(goods_id) {
            getGoods(goods_id).then(response => {
                this.goods = response.data;
                let img = {url:response.data.mainImgUrl};
                this.imgUrl.push(img);
                this.ImgUrl = response.data.mainImgUrl;
                let imgs = response.data.imgUrls;
                if (imgs != undefined && imgs.length > 0) {
                imgs.filter((item, i) => {
                    this.imgUrl.push({url:item});
                })
                }
            });
        },
        //点击小图更换大图
        changeImg(imgUrl){
            this.ImgUrl = imgUrl;
        },
        goTo(goodsId) {
            this.$router.push({path:'/orderdetail',query: { goods_id: goodsId }})
        },
        addCart(goodsId) {
            addCart(goodsId).then(response => {
                if (response.code == 200) {
                this.msgSuccess('新增成功')
                }
            })
            },
    },
}
</script>

<style scoped>
  .image {
    width: 400px;
    height: 400px;
    display: block;
    border:solid 1px  #dadee6;
  }
.line {
	border-top:solid 1px #dadee6;
    border-bottom:solid 1px #dadee6;
	padding:15px 0 15px 5px;
}
.pull {
	margin-left:20px !important;
}
.texts {
    color: rgb(96, 98, 102);
    margin-right: 10px;
}
.card {
    height:530px;
    width:460px;
}
</style>
